<template>
  <div class="tasks-content">
    <van-nav-bar fixed placeholder title="支线任务" left-arrow @click-left="onClickLeft" />
    <van-tabs wrap-class="vant-tabs" nav-class="navClass" :active="active" title-active-color="#739ECA" title-inactive-color="#666" color="#739ECA" line-width="16px" line-height="2px" @change="onChange">
      <van-tab v-for="tab in tabsTo" :key="tab.id" :title="tab.label" :name="tab.id">
        <ze-scroll :exclude-tabbar="true" @scrolltolower="handleScrolltolower" @refresherrefresh="handleRefresh">
          <task-list :work-list="workLists" @getTaskList="getTaskList" />
          <uni-load-more class="task-more" :status="loadMoreStatus" />
        </ze-scroll>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import taskList from './task-list.vue'
import { getDeviceInfo } from '@/utils/storage'
import ZeScroll from '@/components/ze-scroll/index.vue'
import { getTaskList } from '@/apis/project'

export default {
  components: { ZeScroll, taskList },
  props: {
    datas: {
      type: Object,
    },
  },
  data() {
    return {
      moreStatus: 'more',
      pageNo: 1,
      pageSize: 10,
      current: 0,
      value: '',
      active: 0,
      project: '',
      projectBtn: 0,
      tabsTo: [
        { id: 0, label: '全部' },
        { id: 1, label: '未关闭' },
        { id: 2, label: '指派给我' },
      ],
      workLists: [],
      type: '',
      navHeight: '0px',
    }
  },
  mounted() {
    this.calcNavHeight()
    this.getTaskList()
  },
  methods: {
    calcNavHeight() {
      const { navbarHeight, statusBarHeight } = getDeviceInfo()
      this.navHeight = `${navbarHeight + statusBarHeight}px`
    },
    onClickLeft() {
      uni.navigateBack() // 直接使用 navigateBack
    },
    onChange(value) {
      this.projectBtn = value.detail.name
      this.getTaskList()
    },
    async getTaskList() {
      uni.showLoading({
        title: '查询中',
      })
      if (this.pageNo > 1) {
        this.moreStatus = 'loading'
      }
      const params = { pageNo: this.pageNo, pageSize: this.pageSize, id: this.datas.id }
      if (this.projectBtn === 1) {
        params.taskStatus = 'closed'
      } else if (this.projectBtn === 2) {
        params.commander = '1'
      }
      const res = await getTaskList(params)
      const { total, records } = res
      if (this.pageNo === 1) {
        this.workLists = records
      } else {
        this.workLists = [...this.workLists, ...records]
      }
      this.moreStatus = this.workLists.length >= total ? 'noMore' : 'more'
      uni.hideLoading()
    },
    async loadMore() {
      if (['noMore', 'loading'].includes(this.moreStatus)) {
        return
      }
      this.pageNo += 1
      this.getTaskList()
    },
    handleScrolltolower() {
      this.loadMore()
    },
    async handleRefresh() {
      this.pageNo = 1
      this.loadMoreStatus = 'loading'
      await this.getTaskList()
      this.loadMoreStatus = 'more'
    },
  },
}
</script>
<style lang="scss" scoped>
	.tab {
		margin-bottom: 10px;
		position: relative;
		transition: all 250ms;
		background: #f2f2f2;
		color: #666;
		border-radius: 9px;
		width: 76px;
		height: 18px;
		text-align: center;
		line-height: 18px;
		margin-right:12px;

		&::after {
			content: '';
			display: block;
			position: absolute;
			width: 0px;
			height: 2px;
			left: 50%;
			bottom: -7px;
			transform: translateX(-50%);
			background: #fff;
			border-radius: 1px;
			transition: all 250ms;
		}

		&.active {
			font-weight: 500;
			background: rgba(115,158,202,0.1);
			color:#739ECA;
		&::after {
			width: 16px;
		}
	}
}
</style>
<style lang="scss">
	.vant-tabs{
		box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.06) !important;
	}
	.task-search{
		width:90%;
		height:24px;
		display: flex;
		align-items: center;
		border: 1px solid rgba(115, 158, 202, 1);
		border-radius: 20px;
		.searchBtn{
			color: #fff;
			margin-right: 2px;
			text-align: center;
			background-color: rgba(115, 158, 202, 1);
			border-radius: 12px;
			height: 20px;
			width: 44px;
		}
	}
	.navClass{
		width:100%;
	}
	.task-more{
		::v-deep view{
			height:55px !important;
			text{
				height:100%;
			}
		}
	}
</style>
